
/*
 * @Author: your name
 * @Date: 2022-04-01 15:05:39
 * @LastEditTime: 2022-04-07 08:51:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\addIncomeModal\secondStep\secondStepModal.jsx
 */
import React, { useState, useEffect } from 'react';
import './checkModal.css';
import { Modal, Button, Form, Input, DatePicker, Select, Upload, message } from 'antd';

const Checkmodal = (pro) => {
    const { recordData, accpetFalse } = pro
    //    console.log(pro);
    //模态框
    const [isModalVisible, setIsModalVisible] = useState(true);
    useEffect(() => {
        setIsModalVisible(true);
        return () => {
        };
    }, []);

    const handleOk = () => {
        setIsModalVisible(false);
        accpetFalse(false)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        accpetFalse(false)
    };
    //表单
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const btnClose = () => {
        setIsModalVisible(false);
        accpetFalse(false)
    }
    //附件
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            url: 'http://www.baidu.com/xxx.png',
        }
    ])

    const handleChange = (info) => {
        let fileList = [...info.fileList]
        // 限制两个文件，旧的被替换
        fileList = fileList.slice(-2)
        //从响应中读取并显示文件链接
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        setFileList(fileList)
    }
    const props = {
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        onChange: handleChange,
        multiple: true,
    }
    return (
        <>
            <Modal
                title="新增收入【第二步：录入收入信息】"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                ok-text="保存"
                cancel-text="关闭"
                className='change-height'
                width={'600px'}
            >
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item label="客户名称" name="username-group">
                        <>
                            <Input placeholder={recordData.client} disabled />
                            <Button style={{ backgroundColor: '#DD7985' }} onClick={btnClose}>重选</Button>
                        </>
                    </Form.Item>

                    <Form.Item label="收支日期" name="incomeDate" rules={[{ required: true }]}>
                        <DatePicker />
                    </Form.Item>

                    <Form.Item label="收支类别" rules={[{ required: true }]}>
                        <Select>
                            <Select.Option value={"1"} disabled>请选择</Select.Option>
                            <Select.Option value={"2"}>超级管理员</Select.Option>
                            <Select.Option value={"3"}>张三</Select.Option>
                        </Select>
                        {/* <AddIncomeType /> */}
                    </Form.Item>

                    <Form.Item label="收支金额" name="incomeMoney" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>

                    <Form.Item label="资金账户" name="account" >
                        <Select>
                            <Select.Option value={"1"} disabled>请选择</Select.Option>
                            <Select.Option value={"2"}>超级管理员</Select.Option>
                            <Select.Option value={"3"}>张三</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="经办人" name="managers" rules={[{ required: true }]}>
                        <Select>
                            <Select.Option value={"1"} disabled>请选择</Select.Option>
                            <Select.Option value={"2"}>超级管理员</Select.Option>
                            <Select.Option value={"3"}>张三</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="附件" name="accessory">
                        <Upload {...props} fileList={fileList}>
                            <Button type='primary'>选择附件</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item label="备注" name="remarks">
                        <Input />
                    </Form.Item>

                    <Form.Item label="业务员" >
                        <span>超级管理员</span>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default Checkmodal;

